<template>
	<view class="examine">
		<view class="select">
			<select-list ref="select" :list="list" :type="1" :index="num" :placeholder="placeholder" :background="background" :backgroundList="background" :color="color"></select-list>
		</view>
		<view class="header_box">
			<view class="head_title s28 familytow fblod">推荐人信息</view>
			<view class="detail_box flex">
				<view class="list_box flex">
					<view class="left_txt s26 family f500">推荐人</view>
					<view class="right_txt s26 family f500">
						{{ recommendDetail.user.nickname }}
					</view>
				</view>
				<view class="list_box flex">
					<view class="left_txt s26 family f500">联系方式</view>
					<view class="right_txt s26 family f500">
						{{ recommendDetail.user.mobile }}
					</view>
				</view>
				<view class="list_box flex">
					<view class="left_txt s26 family f500">会员级别</view>
					<view class="right_txt s26 family f500">
						{{ recommendDetail.user.identity_name }}
					</view>
				</view>
				<view class="list_box flex">
					<view class="left_txt s26 family f500">推荐日期</view>
					<view class="right_txt s26 family f500">
						{{ get_date(recommendDetail.createtime) }}
					</view>
				</view>
			</view>
		</view>
		<view class="customer_box">
			<view class="customer_txt s28 familytow fblod">客户信息</view>
			<view class="c_user_info_box flex align-center justify-between" v-for="(item, index) in recommendDetail.scopes" :key="index">
				<view class="flex align-center flex-1">
					<view class="user_name_box">
						<image class="w100 h100" src="../static/name.png" mode=""></image>
					</view>
					<view class="user_name_txt s26 family f500 flex-1 text-overflow1">
						{{ item.username }}
					</view>
				</view>
				<view class="flex align-center">
					<view class="user_phone_box">
						<image class="w100 h100" src="../static/phone.png" mode=""></image>
					</view>
					<view class="user_name_txt s26 family f500">
						{{ item.mobile }}
					</view>
				</view>
			</view>
			<view class="detail_box flex">
				<view class="list_box flex">
					<view class="left_txt s26 family f500">生效审核</view>
					<view class="right_txt s26 family f500">待派单</view>
				</view>
			</view>
			<view class="detail_box flex" style="margin-top: 0">
				<view class="list_box flex" style="width: unset; overflow: unset; text-overflow: unset; white-space: unset">
					<view class="left_txt s26 family f500">意向产品</view>
					<view class="right_txt s26 family f500" style="word-wrap: break-word; flex: 1">
						{{ recommendDetail.products || '' }}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_btn flex" @click="paiDan">
			<view class="right_btn s32 familytow fblod txtali">派单</view>
		</view>
	</view>
</template>

<script>
import selectList from '@/components/selectList.vue';
export default {
	components: {
		selectList
	},
	data() {
		return {
			background: '#fff',
			color: '#999',
			placeholder: '选择人员跟单',
			list: [],
			recommendDetail: {},
			shopId: 0,
			index: 0,
			num: 0,
			name: ''
		};
	},
	onLoad(options) {
		this.shopId = options.shopId;
		this.index = options.index;
		this.name = options?.name;
		this.getList(options.shopId);
		this.getDetail(options.id, options.shopId);
	},
	methods: {
		getList(shopId) {
			let that = this;
			this.$request({
				url: 'manage/getStaff',
				data: {
					shop_id: shopId
				}
			}).then((res) => {
				if (res.data.code == 1) {
					if (this.name.length) {
						this.num = res.data.data.findIndex((item) => item.nickname == this.name);
					}
					that.list = res.data.data;
				}
			});
		},
		getDetail(id, shopId) {
			let that = this;
			this.$request({
				url: 'manage/getCustomDetail',
				data: {
					id: id,
					shop_id: shopId
				}
			}).then((res) => {
				if (res.data.code == 1) {
					that.recommendDetail = res.data.data;
				}
			});
		},
		paiDan() {
			let that = this;
			if (that.$refs.select.ion().id == 0) {
				that.$wanlshop.msg('请选择人员跟单');
				return;
			}
			this.$request({
				url: 'manage/dispatch',
				method: 'POST',
				data: {
					id: that.recommendDetail.id,
					staff_id: that.$refs.select.ion().id,
					shop_id: that.shopId
				}
			}).then((res) => {
				if (res.data.code == 1) {
					that.$wanlshop.msg(res.data.msg);
					let obj = {
						shopId: this.shopId,
						index: this.index
					};
					setTimeout(() => {
						// 商家管理派单成功不应该跳转我的客户页面
						uni.navigateBack({
							delta: 1
						});
					}, 2001);
				} else {
					that.$wanlshop.msg(res.data.msg);
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.examine {
	overflow: hidden;

	.select {
		margin-left: 32upx;
		margin-top: -60upx;
	}

	.bottom_btn {
		margin-top: 40upx;

		.left_btn {
			width: 334upx;
			height: 100upx;
			background: #a1a1a1;
			border-radius: 50upx;
			color: #ffffff;
			line-height: 100upx;
		}

		.right_btn {
			width: 686upx;
			height: 100upx;
			background: #ebbe87;
			border-radius: 50upx;
			color: #ffffff;
			line-height: 100upx;
			margin: 0 auto;
		}
	}

	.customer_box {
		width: 686upx;
		// height: 398upx;
		min-height: 338upx;
		background: #ffffff;
		border-radius: 8upx;
		margin: 20upx auto;
		overflow: hidden;

		.customer_txt {
			margin-left: 40upx;
			margin-top: 28upx;
			color: #e4b77f;
		}

		.c_user_info_box {
			width: 624upx;
			height: 70upx;
			background: #fafafa;
			border-radius: 4upx 4upx 4upx 4upx;
			margin-left: 32upx;

			.user_name_box {
				width: 32upx;
				height: 32upx;
				border-radius: 50%;
				// margin: 20upx 0 0 20upx;
				margin: 0upx 0 0 20upx;
			}

			.user_name_txt {
				color: #666666;
				line-height: 70upx;
				margin-left: 20upx;
			}

			.user_phone_box {
				width: 30upx;
				height: 30upx;
				border-radius: 50%;
				// margin: 18upx 0 0 240upx;
			}
		}

		.c_user_info_box:nth-child(2) {
			margin-top: 32upx;
		}

		.detail_box {
			margin-top: 32upx;
			flex-wrap: wrap;
			margin-left: 32upx;

			.list_box {
				width: 292upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-right: 30upx;
				margin-bottom: 26upx;

				.left_txt {
					width: 104upx;
					color: #999999;
				}

				.right_txt {
					color: #333333;
					margin-left: 16upx;
				}
			}
		}
	}

	.header_box {
		width: 686upx;
		height: 224upx;
		background: #ffffff;
		border-radius: 8upx;
		margin: 20upx auto;
		padding: 28upx 0 0 32upx;
		box-sizing: border-box;

		.head_title {
			color: #666666;
		}

		.detail_box {
			margin-top: 32upx;
			flex-wrap: wrap;

			.list_box {
				width: 292upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-right: 30upx;
				margin-bottom: 26upx;

				.left_txt {
					width: 104upx;
					color: #999999;
				}

				.right_txt {
					color: #333333;
					margin-left: 16upx;
				}
			}
		}
	}
}
</style>
<style>
page {
	background-color: #f4f5f9;
}
</style>
